<template>
  <div class="content">
    <vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="30"
        shapeType="circle"
        :particleSize="1"
        linesColor="#f2f2f2"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
      >
      </vue-particles>
    <div class="container">
      <div class="form-box1">
        <div class="head">{{$t('message.Welcome')}}</div>

        <!-- tab 切换 -->
        <el-form class="form" :model="form1" ref="form1" label-position="left">
          <el-form-item prop="username" label="手机号">
            <el-input v-model="form1.username" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item prop="password" :label="$t('message.loginpassword')">
            <el-input type="password" v-model="form1.password"  @keyup.enter.native="submit()"  :placeholder="$t('message.loginpassword')"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="large" type="primary" style="background:#6881FF!important;" @click="submit('form1')">{{$t('message.immediatelyDl')}}</el-button>
          </el-form-item>
        </el-form>

     

        <div class="formFoot">
          <router-link class="link" to="/register">{{$t('message.Register')}}</router-link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <router-link class="link forget" to="/reset">{{$t('message.Forgot')}}</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import { loginAdd } from '../api/api'
import qs from 'qs'

export default {
  
  data() {
    var checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error(this.$t('message.cannoty')));
      }
      setTimeout(() => {
        if (value.indexOf("@") !== -1) {
          if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)) {
            callback(new Error(this.$t('message.wrong')));
          }
        } else {
          if (!/^\d{11}$/.test(value)) {
            callback(new Error(this.$t('message.modify')));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var checkCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error(this.$t('message.emptyf')));
      }
      setTimeout(() => {
        if (!/^\d{6}$/.test(value)) {
          cb(new Error(this.$t('message.correctly')));
        } else {
          callback();
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t('message.enterpassword')));
      } else {
        // 登录密码，只判断是否正确未判断格式
        callback();
      }
    };
    return {
      // type: 0,
      activeName: "first",
      form1: {
        username: "",
        password: ""
      },
      form2: {
        telNum: "",
        code: ""
      }
    };
  },
  computed: {
    ...mapGetters(["dealList", "notices", "news"]),
    year() {
      let date = new Date();
      let year = date.getFullYear();
      return year;
    }
    
  },
  mounted(){
    
  },
  methods: {
    ...mapActions(["getDealList", "getNotices", "getNews"]),
    handleClick(tab, event) {
      console.log(tab, event);
    },
    tabClick(index) {
      pageData.save(this, {
        tab: index
      });
    },
   
    submit() {
      // 提交表单，与借口交互：登录成功、密码错误、服务器错误

      // if (!this.form1.username) {
      //   console.log(321321);
      //   this.$message.error(this.$t('message.oremail'));
      //   return false;
      // }
     
     
      //   if (!/^\d{11}$/.test(this.form1.username)) {
      //     this.$message.error(this.$t('message.correctphone'));
      //     return false;
      //   }
      
    

      let data = {
        guid:this.$allId.guid,
        loginId:this.form1.username,   
        // loginId:'145844',  
        hashedPassword:this.$md5(this.form1.password),
        // hashedPassword:'c4ca4238a0b923820dcc509a6f75849b',
        ip:"555"
      }
      loginAdd(data).then(res => {
        console.log(res.data)
        if(res.data.ResultCD=="I001"){
          window.sessionStorage.setItem('user',JSON.stringify(res.data))
          this.$store.commit('mainUser',JSON.stringify(res.data));
          this.$store.commit('SET_USER',res.data);
          // this.$store.commit('SET_TOKEN',res.data.data);
        
             this.$router.push({path:'/'})
          
         
        }else{
          this.$message.error(res.data.ErrorMsg);
        }
      })
      
      
    }
  }
};
</script>

<style>
</style>

<style lang="scss" scoped>
@import "../assets/css/var.css";
.container {
  // background-color: #fff;
  margin: 0px auto;
  // margin-top: 200px;
  padding-top:200px;
  height: 84vh;
  width: 100%;
}
.lizi {
    width: 100%;
    height: 100%;
    position: fixed;
    top:0px;
    left: 0px;
    z-index: -1;
    background: #1a273a;
  }
.form-box1 {
  position: relative;
  border: 1px solid #ddd;
  background: #fff;
  padding-bottom: 20px;
  border-radius: 15px;
  & .formFoot {
    background: #ddd;
    height: 45px;
    line-height: 45px;
    text-align: center;
  }
  & div.el-input.form-code-input {
    width: 210px;
  }
  & .send-code-btn {
    position: absolute;
    margin-left: -1px;
  }
}
.link {
  color: #20a0ff;
}
.forget {
  // position:absolute;
  // top:290px;
  // right: 40px;s
}
.form-box1 {
  // padding: 30px 0 0;
  & .head {
    padding: 0;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    line-height: 50px;
  }
}
.el-tabs__header {
  border: none;
}
.el-form-item {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
button {
  width: 100%;
}

.protocol-line {
  margin-top: 25px;
  padding-bottom: 115px;
  position: relative;
  border-top: 1px solid #ddd;
  & .protocol {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    color: #1687ee;
    padding: 0 13px;
    background-color: #fff;
  }
}

.copyright {
  text-align: center;
  padding-bottom: 30px;
}
</style>
